<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图左右</title>
		<style type="text/css">
			*{ margin: 0;padding: 0;}
			#box{ margin: 100px auto;
			      width: 490px;
			      height: 170px;
			      position: relative;
			      overflow:hidden;
			     }
			li{ list-style: none;}
			ul{ width: 3000px;}
			ul li{ float: left;
			       width: 490px;}
			
			ol{ position: absolute;
			    bottom: 10px;
			    right: 5px;}
			ol li{ float: left; 
			       width: 25px;
			       height: 25px;
			       line-height: 25px;
			       border: #333333 solid 1px;
			       background: #ccc;
			       text-align: center;
			       margin-left: 5px;
			      } 
			.on{ background: #f60;
			     color: #fff; }  
		</style>
	</head>
	<body>
		<div id="box">
			<ul id="pic">
				<li><img src="../img/54111cd9000174cd04900170.jpg" alt="" /></li>
				<li><img src="../img/54111d7d00018ba604900170.jpg" alt="" /></li>
				<li><img src="../img/54111d8a0001f41704900170.jpg" alt="" /></li>
				<li><img src="../img/54111d9c0001998204900170.jpg" alt="" /></li>
				<li><img src="../img/54111dac000118af04900170.jpg" alt="" /></li>
				<li><img src="../img/54111cd9000174cd04900170.jpg" alt="" /></li>
			</ul>
			<ol id="list">
				<li class="on">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ol>
		</div>
	</body>
</html>
<script src="../jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var pic=document.getElementById("pic");
	var list=document.getElementById("list").getElementsByTagName('li');
	var t=null;
	var num=0;
	function auto(){
		t=setInterval(function(){
			change();
			num++;
		},1000)
	}
	auto();
	$('ol li').mouseover(function(){
		clearInterval(t);
		num=$(this).index();
		change();
	})
	$('ol li').mouseout(function(){
		auto();
	})
	function change(){
		if(num==list.length+1){
			pic.style.marginLeft='0px';
			num=1;
			
		}
		domove(pic,'margin-left',-490*num);
		if(num==list.length){
			$('ol li').eq(0).addClass('on').siblings().removeClass('on');
		}else{
			$('ol li').eq(num).addClass('on').siblings().removeClass('on');
		}
	}
	function domove(obj,attr,target){
		clearInterval(obj.timer);
		obj.timer=setInterval(function(){
			var speed=(target-parseInt($(obj).css(attr)))/8;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			if(parseInt($(obj).css(attr))==target){
				clearInterval(obj.timer);
			}else{
				obj.style[attr]=parseInt($(obj).css(attr))+speed+'px';
			}
		},30)
	}
</script>
